<template>
  <dv-border-box-12 class="full_screen" style="padding: 0px;">

    <el-row :gutter="10" style="height:100%">
      <el-col :span="14" style="height:100%">
        <div style="display: flex;flex-direction: column;height: 100%;">

          <div style="flex: 1;overflow-y: hidden;margin-top: 10px;">
            <dv-border-box-10>
              <dv-scroll-board :config="config" :item-size="30" :page-size="10" :page-count="3"
                style="width: 100%; height: 600px" />
            </dv-border-box-10>
          </div>

        </div>
      </el-col>
      <el-col :span="10" style="height:100%;padding: 10px 0px;">
        <div style="flex: 1 ;display: flex;flex-direction: column;height: 100%;">
          <!-- <dv-charts :option="option1" style="height: 400px;" />
            <dv-charts :option="option1" style="height: 400px;" /> -->
          <div style="flex: 1;">
            <dv-border-box-8 :color="['#025d6d']">
              <div style="height:100%;" ref="echarts1"> </div>
            </dv-border-box-8>

          </div>
          <div style="flex: 1;margin-top: 5px;">

            <dv-border-box-8 :color="['#025d6d']" style="flex: 1;">
              <div style="height:100%;" ref="echarts2"> </div>
            </dv-border-box-8>
          </div>

        </div>
      </el-col>

    </el-row>

  </dv-border-box-12>
</template>
<script>
// import Charts from '@jiaminghi/charts';
import pieOption1 from './charts/pieOption1';
import { tableData } from './data';
import barOption1 from './charts/bar1';

export default {
  components: {},
  data() {
    return {
      loading: true,
      config: {
        indexHeader: '序号',
        // oddRowBGC: 'green', // 奇数行背景色
        // evenRowBGC: '#000', // 偶数行背景色
        // headerBGC: '#eb5a6d', // 表头背景色
        header: ['企业名称', '较好', '一般', '较差', '未创建', '编辑', '删除'],
        rowNum: 10, // 表行数
        index: true,
        headerHeight: 50,
        carousel: 'page',
        columnWidth: [50, 300],
        waitTime: 1500, // 轮播时间间隔(ms)
        align: ['center', 'center'],
        tableData,

        data: [
          // ["<span style='cursor:pointer'>上海市</span>", 1111],
          // ["<span style='cursor:pointer'>北京市</span>", '伟大的劳动人民'],
          // ["<span style='cursor:pointer'>广西壮族自治区</span>", 9098],
          // ["<span style='cursor:pointer'>广东省</span>", 8909099],
          // [
          //   "<span style='cursor:pointer'>东北三省</span>",
          //   "<span style='color:yellow'>吉林省、黑龙江省、辽宁省</span>",
          // ],

          [
            '有很多活动写不完',
            "<span class='point-class' style='color: #08C887;'><i class='el-icon-edit'></i></sapn>",
          ],
        ],
      },
      option1: {},
    };
  },
  methods: {
    loadCharts() {
      this.option1 = pieOption1;
      // const container = document.getElementById('container1');
      const myChart = this.$echarts.init(this.$refs.echarts1);
      myChart.setOption(this.option1);

      const myChart1 = this.$echarts.init(this.$refs.echarts2);
      myChart1.setOption(barOption1);

      window.onresize = function () {
        //自适应大小
        myChart.resize();
      };
    },
    loadTable() {
      const dataTable = tableData.map((item) => {
        const score = item.score || 0;
        return [
          // (index+1)+"",
          item.compny_name,

          score < 2 ? "<span class='active_dot-class' ></sapn>" : '',
          score < 15 && score >= 2
            ? "<span class='active_dot-class' ></sapn>"
            : '',
          score < 40 && score >= 15
            ? "<span class='active_dot-class' ></sapn>"
            : '',
          score < 70 && score >= 40
            ? "<span class='active_dot-class' style=''></sapn>"
            : '',
          "<span class='point-class' style='color: #08C887;'><i class='el-icon-edit'></i></sapn>",
          "<span class='point-class' style='color: red;'><i class='el-icon-delete'></i></sapn>",
        ];
      });
      this.config.data = dataTable;

      console.log('dataTable', dataTable);
    },
  },

  mounted() {
    const vm = this;
    setTimeout(() => {
      this.loading = false;
    }, 500);
    setTimeout(() => {
      vm.loadCharts();
    }, 500);
    this.loadTable();
  },
};
</script>
<style scoped>
.user_skills {
  width: 50%;
  margin: auto;
}

.user_skills /deep/ .el-table--fit {
  padding: 20px;
}

.user_skills /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.user_skills /deep/ .el-table tr {
  background-color: transparent !important;
}

.user_skills /deep/ .el-table th.el-table__cell {
  background-color: transparent;
}

.user_skills /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

.menu_text {
  color: #01ccec;
  font-size: 15px;
}

.border-box-content {
  padding: 10px;
  box-sizing: border-box;
}

.full_screen > .border-box-content {
  padding-top: 45px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.menu_row {
}

/deep/ .active_dot-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: red;
}

.menu_col {
  height: 60px;
  margin-bottom: 15px;
}

/deep/ .point-class {
  cursor: pointer;
}
</style>